import React from 'react';
import { message } from 'antd';
import { ProCard, StatisticCard } from '@ant-design/pro-card';
import { ProjectOverviewDataType } from '@/types/dashboard';

interface ProjectOverviewCardProps {
  loading: boolean;
  overviewDatas: ProjectOverviewDataType;
  // 卡片点击回调
  cardOnClick?: (dataKind: string, type: string, systemCode: string) => void;
}

/**
 * 项目任务概览
 */
const ProjectOverviewCard: React.FC<ProjectOverviewCardProps> = (props) => {

  /**
   * tip提示组件，可点击组件跳转至详情页面，查询相应的信息
   * @param kind 业务种类 1-提测需求，2-投产需求，3-交易任务
   * @param type 业务类型，1-今日，2-本周，3-下周，4-10天后
   * @param systemCode 系统编码
   * @returns TipItem
   */
  const createTipItem = (kind: string, type: string, systemCode: string) => (
    <a
      title='点击可查看详细信息'
    >
      点击可查看详细信息
    </a>
  );

  /**
   * 卡片点击事件
   * 
   * @param dataKind 业务种类 1-提测需求，2-投产需求，3-需求任务，4-交易任务
   * @param type 业务类型，1-今日，2-本周，3-下周，4-10天后
   * @param systemCode 系统编码
   */
  const cardClick = (value: number = 0, dataKind: string, type: string, systemCode: string) => {
    // console.info('cardClick', dataKind, type, systemCode);
    if (value === 0) {
      message.warn('无相关任务数据，无法查看详细信息');
      return;
    }
    const { cardOnClick } = props;
    if (cardOnClick) {
      cardOnClick(dataKind, type, systemCode);
    }
  }

  const { overviewDatas } = props;
  const redValueStyle: React.CSSProperties = { color: '#cf1322' };
  const {
    // 提测需求数
    todaySitCqNum, thisWeekSitCqNum, nextWeekSitCqNum, tenDaysSitCqNum,
    // 投产需求数
    todayPrdCqNum, thisWeekPrdCqNum, nextWeekPrdCqNum, tenDaysPrdCqNum,
    // 未做需求任务数
    todayUndoCqTaskNum, thisWeekUndoCqTaskNum, nextWeekUndoCqTaskNum, expiredUndoCqTaskNum,
    // 未做交易任务数
    todayUndoTradeTaskNum, thisWeekUndoTradeTaskNum, nextWeekUndoTradeTaskNum, expiredUndoTradeTaskNum,
    systemCode = 'GBSP'
  } = overviewDatas;

  return (
    <ProCard split="horizontal">
      <ProCard split="vertical">
        <StatisticCard
          statistic={{
            title: '今日SIT提测需求',
            value: todaySitCqNum,
            valueStyle: redValueStyle,
            status: 'error',
            tip: '统计SIT开始日期为今天的需求总数',
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(todaySitCqNum, '1', '1', systemCode)}
        />
        <StatisticCard
          statistic={{
            title: '本周SIT提测需求',
            value: thisWeekSitCqNum,
            tip: '统计SIT开始日期在本周范围内的需求总数',
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(thisWeekSitCqNum, '1', '2', systemCode)}
        />
        <StatisticCard
          statistic={{
            title: '下周SIT提测需求',
            value: nextWeekSitCqNum,
            tip: '统计SIT开始日期在下周范围内的需求总数',
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(nextWeekSitCqNum, '1', '3', systemCode)}
        />
        <StatisticCard
          statistic={{
            title: '10天后SIT提测需求',
            value: tenDaysSitCqNum,
            tip: '统计SIT开始日期在10天以后的需求总数',
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(tenDaysSitCqNum, '1', '4', systemCode)}
        />
      </ProCard>
      <ProCard split="vertical">
        <StatisticCard
          statistic={{
            title: '今日投产需求',
            value: todayPrdCqNum,
            valueStyle: redValueStyle,
            status: 'error',
            tip: createTipItem('2', '1', systemCode),
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(todayPrdCqNum, '2', '1', systemCode)}
        />
        <StatisticCard
          statistic={{
            title: '本周投产需求',
            value: thisWeekPrdCqNum,
            tip: createTipItem('2', '2', systemCode),
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(thisWeekPrdCqNum, '2', '2', systemCode)}
        />
        <StatisticCard
          statistic={{
            title: '下周投产需求',
            value: nextWeekPrdCqNum,
            tip: createTipItem('2', '3', systemCode),
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(nextWeekPrdCqNum, '2', '3', systemCode)}
        />
        <StatisticCard
          statistic={{
            title: '10天后投产需求',
            value: tenDaysPrdCqNum,
            tip: createTipItem('2', '4', systemCode),
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(tenDaysPrdCqNum, '2', '4', systemCode)}
        />
      </ProCard>
      <ProCard split="vertical">
        <StatisticCard
          statistic={{
            title: '今日需求待办任务',
            value: todayUndoCqTaskNum,
            valueStyle: redValueStyle,
            status: 'error',
            tip: createTipItem('3', '1', systemCode),
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(todayUndoCqTaskNum, '3', '1', systemCode)}
        />
        <StatisticCard
          statistic={{
            title: '本周需求待办任务',
            value: thisWeekUndoCqTaskNum,
            tip: createTipItem('3', '2', systemCode),
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(thisWeekUndoCqTaskNum, '3', '2', systemCode)}
        />
        <StatisticCard
          statistic={{
            title: '下周需求待办任务',
            value: nextWeekUndoCqTaskNum,
            tip: createTipItem('3', '3', systemCode),
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(nextWeekUndoCqTaskNum, '3', '3', systemCode)}
        />
        <StatisticCard
          statistic={{
            title: '已过期需求待办任务',
            value: expiredUndoCqTaskNum,
            valueStyle: redValueStyle,
            status: 'error',
            tip: createTipItem('3', '4', systemCode),
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(expiredUndoCqTaskNum, '3', '4', systemCode)}
        />
      </ProCard>
      <ProCard split="vertical">
        <StatisticCard
          statistic={{
            title: '今日交易待办任务',
            value: todayUndoTradeTaskNum,
            valueStyle: redValueStyle,
            status: 'error',
            tip: createTipItem('4', '1', systemCode),
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(todayUndoTradeTaskNum, '4', '1', systemCode)}
        />
        <StatisticCard
          statistic={{
            title: '本周交易待办任务',
            value: thisWeekUndoTradeTaskNum,
            tip: createTipItem('4', '2', systemCode),
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(thisWeekUndoTradeTaskNum, '4', '2', systemCode)}
        />
        <StatisticCard
          statistic={{
            title: '下周交易待办任务',
            value: nextWeekUndoTradeTaskNum,
            tip: createTipItem('4', '3', systemCode),
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(nextWeekUndoTradeTaskNum, '4', '3', systemCode)}
        />
        <StatisticCard
          statistic={{
            title: '已过期交易待办任务',
            value: expiredUndoTradeTaskNum,
            valueStyle: redValueStyle,
            status: 'error',
            tip: createTipItem('4', '4', systemCode),
          }}
          style={{cursor: 'pointer'}}
          onClick={() => cardClick(expiredUndoTradeTaskNum, '4', '4', systemCode)}
        />
      </ProCard>
    </ProCard>
  );
}

export default ProjectOverviewCard;